<template>
	<view class="liveBox">
		<view class="navBox">
			<u-navbar :title="liveDetail?liveDetail.name:'加载中'" :autoBack="true" :titleStyle="{fontWeight:'900'}"
				bgColor="#ffffff">
			</u-navbar>
		</view>
		<view class="livePlayer" :style="'top:'+customBarHeight+'px;'">
			<live-player id="live-player" :src="liveDetail.flv" mode="live"
				style="position: fixed;width: 100%;height: 211px;box-sizing: border-box;padding-bottom: 40rpx;background-color: #000000;" autoplay controls v-if="liveDetail.live_status==2">
				<!-- 打开全屏 -->
				<cover-image class="img img-f" v-if="btnToggle == false" @click="fullScreen"
					src="@/static/images/fullScreen.png" mode=""></cover-image>
				<!-- 退出全屏 -->
				<cover-image class="img img-q" v-else @click="quitFullScreen" src="@/static/images/quitFullScreen.png"
					mode=""></cover-image>

			</live-player>
			<video :src="liveDetail.replay" style="position: fixed;width: 100%;height: 211px;"
				v-if="liveDetail.live_status==3"></video>
		</view>
		<view class="chatBox"
			:style="'height:'+(pageHeight-(220+customBarHeight))+'px;top:'+(211+customBarHeight)+'px;'">
			<chat :Height="pageHeight-(300+customBarHeight)" :Top="(211+customBarHeight)" :Id="id"
				:is_jinyan="liveDetail.is_jinyan" :live_status="liveDetail.live_status"></chat>
		</view>
	</view>
</template>

<script>
	import {
		messageList,
		watchLive,
		getLiveDetail,
		liveroomMessage,
	} from "@/api/api.js"
	const app = getApp();
	export default {
		data() {
			return {
				id: null,
				liveDetail: null,
				pageHeight: 0,
				btnToggle: false,
				customBarHeight: Number(44 + app.globalData.statusBar),
				liveInterval: null
			}
		},
		destroyed() {
			clearInterval(this.liveInterval)
		},
		onHide() {
			clearInterval(this.liveInterval)
		},
		onLoad(options) {
			if (options && options.id) {
				this.id = options.id
				this.getLiveDetail()
				this.watchLive()
				this.liveInterval = setInterval(() => {
					this.getLiveDetail()
				}, 5000)
			}
			let that = this
			uni.getSystemInfo({
				success(res) {
					that.pageHeight = Number(res.windowHeight)
				}
			})
		},
		methods: {
			// 进入全屏
			fullScreen() {
				this.videoContext = uni.createLivePlayerContext('live-player');
				this.videoContext.requestFullScreen({
					direction: 90
				});
				this.btnToggle = true;
			},
			// 退出全屏
			quitFullScreen() {

				this.videoContext = uni.createLivePlayerContext('live-player');
				this.videoContext.exitFullScreen();
				this.btnToggle = false;
			},

			//观看直播
			watchLive() {
				watchLive({
					live_id: this.id
				}).then(res => {
					//观看成功
				})
			},
			getLiveDetail() {
				getLiveDetail({
					live_id: this.id
				}).then(res => {
					this.liveDetail = res.data
					if (this.liveDetail.live_status == 3 && this.liveDetail.replay == '') {
						clearInterval(this.liveInterval)
						uni.showModal({
							title: "直播已结束",
							showCancel: false,
							success(res) {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									})
								}
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.liveBox {
		min-height: 100vh;
		background-color: #f8f8f8;

		.navBox {
			position: relative;
			z-index: 2000;
		}

		.livePlayer {
			position: relative;
			width: 100%;
			z-index: 300;

			.img {
				width: 24rpx;
				height: 24rpx;
				position: absolute;

			}

			.img-f {
				bottom: 4rpx;
				right: 32rpx;
			}

			.img-q {
				bottom: 4rpx;
				right: 32rpx;
			}

		}

		.chatBox {
			position: relative;
			z-index: 200;
			// overflow: scroll;
		}
	}
</style>